<template>
	<view class="container">
		<view class="item-view">
			<children-base-top-view 
				:name="children.name" 
				:gender="children.gender" 
				:imgUrl="children.imgUrl"
				:birthday="children.birthday"
				/>
		</view>
		<view class="item-view">
			<view>
				里程碑月龄: {{monthAge}}
			</view>
			<view>
				记录月龄: {{childrenMonthAge}}
			</view>
		</view>
		<view class="item-view">
			<view class="item-title-view">
				<view class="item-title-top"></view>
				<view class="item-title">儿心量表</view>
			</view>
			<view class="content-view">
				<text>{{label}}</text>
			</view>
		</view>
		<view class="item-view">
			<view class="item-title-view">
				<view class="item-title-top"></view>
				<view class="item-title">格赛尔发育量表</view>
			</view>
			<view class="content-view">
				<text>{{content}}</text>
			</view>
		</view>
		<view class="item-view">
			<multi-media-view v-if="resourceUrls.length > 0" :resourceUrls="resourceUrls"></multi-media-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import MultiMediaView from '@/components/multi-media-view'
	import ChildrenBaseTopView from '@/components/children-base-top-view.vue'
	import { getMilepostRecord, getMilepostRecordByTch } from './api/growth.js'
	export default {
		components: {
			ChildrenBaseTopView,
			MultiMediaView
		},
		data() {
			return {
				children: {},
				label: '',
				content: '',
				childrenMonthAge: '',
				monthAge: '',
				resourceUrls: []
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.getDetail()
		},
		methods: {
			questionClick(index) {
				const details = this.list[index].details
				uni.showModal({
					title: '提示',
					content: details,
					showCancel: false,
					success: function (res) {
					}
				});
			},
			
			getDetail() {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					getMilepostRecordByTch({ recordId: this.id }).then(res => {
						console.log(res)
						this.showData(res)
					})
				} else {
					getMilepostRecord({ recordId: this.id }).then(res => {
						console.log(res)
						this.showData(res)
					})
				}
			},
			
			showData(res) {
				this.label = res.data.label;
				this.content = res.data.content;
				this.childrenMonthAge = res.data.childrenMonthAge;
				this.monthAge = res.data.monthAge;
				this.children = res.data.children;
				if (!this.$u.test.isEmpty(res.data.url)) {
					this.resourceUrls = res.data.url.split('|');
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container {

	}
	
	.item-view{
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	
	.item{
		background-color: #FFFFFF;
	}
	
	.item-title-view{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.item-title-top{
		width:10px;
		height:15px;
		background:rgba(250,203,47,1);
		opacity:1;
	}
	
	.item-title{
		font-size:30rpx;
		font-weight:bold;
		color:rgba(34,34,34,1);
		opacity:1;
		margin-left: 10rpx;
	}
	
	.content-view{
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		margin-left: 20rpx;
		align-items: center;
		justify-content: space-between;
		
		font-size: 26rpx;
		color: #333333;
	}

	.item-check-yes{
		width: 36rpx;
		height: 25rpx;
	}
	
	.item-check-no{
		width: 30rpx;
		height: 30rpx;
	}
	
	.suggest--exline{
		border-top:1px dashed $app-main-color;
		height: 1px;
		overflow:hidden;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
